@import '../mixins/common.less';
@import '../custom.less';

@image-viewer-prefix-cls: ~'@{css-prefix}image-viewer';

.@{image-viewer-prefix-cls} {
  &__wrapper {
    @apply fixed;
    @apply top-0;
    @apply right-0;
    @apply bottom-0;
    @apply left-0;
  }

  &__btn {
    @apply absolute;
    @apply ~'z-[1]';
    @apply flex;
    @apply items-center;
    @apply justify-center;
    @apply rounded-full;
    @apply opacity-80;
    @apply box-border;
    .user-select(none);

    svg {
      @apply fill-color-icon-inverse;
    }
  }

  &__close {
    @apply top-10;
    @apply right-10;
    @apply w-10;
    @apply h-10;
    @apply text-xl;
    @apply bg-color-bg-6;

    &:hover {
      @apply cursor-pointer;
    }
  }

  &__canvas {
    @apply w-full;
    @apply h-full;
    @apply flex;
    @apply justify-center;
    @apply items-center;
  }

  &__actions {
    @apply ~'left-1/2';
    @apply bottom-6;
    @apply ~'-translate-x-2/4';
    @apply w-72;
    @apply h-11;
    @apply py-0 px-6;
    @apply bg-color-bg-6;
    @apply rounded-full;
  }

  &__actions-inner {
    @apply w-full;
    @apply h-full;
    @apply text-justify;
    @apply cursor-default;
    @apply text-2xl;
    @apply flex;
    @apply items-center;
    @apply justify-around;

    svg {
      @apply fill-color-icon-inverse;

      &:hover {
        @apply cursor-pointer;
      }
    }
  }

  &__next,
  &__prev {
    @apply ~'top-1/2';
    @apply w-11;
    @apply h-11;
    @apply bg-color-bg-6;

    &:hover {
      @apply cursor-pointer;
    }
  }

  &__prev {
    @apply ~'-translate-y-2/4';
    @apply left-10;
  }

  &__next {
    @apply ~'-translate-y-2/4';
    @apply right-10;
    @apply ~'indent-0.5';
  }

  &__mask {
    @apply absolute;
    @apply w-full;
    @apply h-full;
    @apply top-0;
    @apply left-0;
    @apply opacity-50;
    @apply bg-black;
  }
}
